<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<style type="text/css">
.addForm {
	width: 100px;
}
</style>
<script type="text/javascript">
	var monitorListTable;
	$(document).ready(function() {
		$("#resetForm").click(function() {
			$("#form input").val("");
		});
		$("#save").click(function() {
			var id = $("#editForm input[name=id]").val();
			var model = $("#editForm input[name=model]").val();
            var remark = $("#editForm :input[name=remark]").val();
            var sn = $("#editForm input[name=sn]").val();
            var validateCode = $("#editForm input[name=validateCode]").val();

			if ($.trim(model) === "") {
				$.messager.alert("设备型号不能为空");
				return false;
			}
            if ($.trim(sn) === '') {
                $.messager.alert("设备序号是必填的");
                return false;
            }
            if ($.trim(validateCode) === '') {
                $.messager.alert("设备验证码是必填的");
                return false;
            }
            if (remark.length > 255) {
                $.messager.alert("备注不能超过 255 个字符");
                return false;
            }
			var url = contextpath + "/web/monitor/update";
            if(id === ''){
                url = contextpath + "/web/monitor/insert";
            }
			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : url,
				data : $('#editForm').serialize(),
				success : function(result) {
                    $("#save").removeAttr("disabled");
                    if (result.code === 200) {
                        $("#editModal").modal("hide");
                        $.messager.alert("提示", "保存成功");
                        monitorListTable.ajax.reload(null, false);
                    } else {
                        $.messager.alert("提示", result.msg);
                    }
				}
			});
		});
        monitorListTable = $('#monitorListTable').DataTable({
            "bSort": true, //是否启动各个字段的排序功能
            "aaSorting": [[4, "desc"]], //默认的排序方式
            "aoColumns": [
                {
                    "mDataProp": "sn",
                    "sTitle":"设备编码",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : true,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "model",
                    "sTitle":"设备型号",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "version",
                    "sTitle":"设备版本",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "status",
                    "sTitle":"设备状态",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData === '--' || sData === 0) {
                            $(nTd).html('未使用');
                        }else if(sData === 1){
                            $(nTd).html('使用中');
                        }else if(sData === 2){
                            $(nTd).html('已过期');
                        }else if(sData === 3){
                            $(nTd).html('已暂停');
                        }
                    }
                },
                {
                    "mDataProp": "createTime",
                    "sTitle": "创建时间",
                    "sWidth": "15%",
                    "sDefaultContent": "--",
                    "bSortable": true,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData !== '--') $(nTd).attr('title', sData);
                    }
                },
                {
                    "mDataProp": "id",
                    "sTitle": "操作",
                    "sWidth": "240px",
                    "sClass": "center flow",
                    "bSearchable": false,
                    "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='editMonitor(" + iRow + ")'><i class='fa fa-pencil'></i>&nbsp;编辑</a>&nbsp;&nbsp;")
                            .append("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='deleteMonitor(" + iRow + ")'><i class='fa fa-times'></i>&nbsp;删除</a>&nbsp;&nbsp;")
                            .append("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='checkMonitor(" + iRow + ")'><i class='fa fa-refresh'></i>&nbsp;检测</a>&nbsp;&nbsp;")
                            .append("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='viewMonitor(" + iRow + ")'><i class='fa fa-video-camera'></i>&nbsp;查看</a>&nbsp;&nbsp;");
                    }
                }
            ],
            "ajax": {
                url: contextpath + '/web/monitor/queryPage',
                type:"post",
                data: function(data){
                    $.xDataTablesParams(data, $.trim($('#name').val()));
                    return data;
                }
            }
        });

        $('#editModal').on('hide.bs.modal', function () {
            $('#editForm :input').val('');
            $("#save").removeAttr("disabled");
        });

    });

    function editMonitor(row){
        $('#modalTitle').text('编辑设备信息');
        var rowData = monitorListTable.row(row).data();
        $('#editModal :input[name=id]').val(rowData.id);
        $('#editModal :input[name=model]').val(rowData.model);
        $('#editModal :input[name=sn]').val(rowData.sn).attr('readonly', 'readonly');
        $('#editModal :input[name=validateCode]').val(rowData.validateCode);
        $('#editModal :input[name=version]').val(rowData.version);
        $('#editModal :input[name=remark]').val(rowData.remark);

        $('#editModal').modal('show');
    }

    function checkMonitor(row){
        var rowData = monitorListTable.row(row).data();

        $.ajax({
            url : contextpath + '/web/monitor/check',
            type : 'get',
            data : {monitorId: rowData.id},
            success :  function(data){
                if (data.code === 200) {
                    $.messager.alert("提示", "检测成功");
                    monitorListTable.ajax.reload(null, false);
                } else {
                    $.messager.alert("提示", data.msg);
                }
            }
        });
    }

    function viewMonitor(row){
        var rowData = monitorListTable.row(row).data();
        if(!rowData.videoAddress){
            $.messager.alert("提示", "请先检测设备");
            return;
        }
        // $('#videoIframe').attr('src', contextpath + '/web/monitor/videoShow?monitorId=' + rowData.id);
        window.open(contextpath + '/web/monitor/videoShow?monitorId=' + rowData.id)
        // $('#videoModal').modal('show');
    }



    function addMonitor(){
        $('#modalTitle').text('新增监控设备');
        $('#editModal :input[name=sn]').removeAttr('readonly');
        $('#editModal').modal('show');
    }

    function deleteMonitor(row){
        var rowData = monitorListTable.row(row).data();
        $.messager.confirm("确定", "真的要删除'" + rowData.sn + "'吗？", function(){
            $.ajax({
               url : contextpath + '/web/monitor/delete/' + rowData.id,
               type : 'DELETE',
               success :  function(data){
                   if (data.code === 200) {
                       $.messager.alert("提示", "删除成功");
                       monitorListTable.ajax.reload();
                   } else {
                       $.messager.alert("提示", data.msg);
                   }
               }
            });
        });
    }

    function searchTable(){
        monitorListTable.ajax.reload();
    }

</script>
</head>
<body>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>监控设备列表</h2>
		</div>
		<br/>
		<form id="form" class="form-inline" role="form" action="#" method="post">
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon">设备号</span>
					<input type="text" class="form-control" id="name" placeholder="名称" style="width: 150px;">
				</div>
			</div>
			<button type="button" class="btn btn-default" onclick="searchTable()">查询</button>
			<button id="add" type="button" class="btn btn-info" onclick="addMonitor()">新增</button>
		</form>
		<br>
		<div>
			<table class="table table-hover table-striped table-bordered" style="table-layout:fixed;" id="monitorListTable"></table>
		</div>
	</div>

	<div class="modal fade" id="editModal" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="modalTitle">信息</h4>
				</div>
				<div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" name="id">
                        <table id="editTable" class="table-hover table table-bordered">
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon addForm">设备号</span>
                                        <input type="text" class="form-control" name="sn" placeholder="设备号" style="width: 320px;">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon addForm">设备型号</span>
                                        <input type="text" class="form-control" name="model" value="CS-C3C-31WFR" placeholder="设备型号" style="width: 320px;">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon addForm">验证码</span>
                                        <input type="text" class="form-control" name="validateCode" placeholder="验证码" style="width: 320px;">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon addForm">版本号：</span>
                                        <input type="text" class="form-control" name="version" placeholder="版本号" style="width: 320px;">
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">备注</span>
                                        <textarea class="form-control" name="remark" rows="3" placeholder="备注"></textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <button id="save" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button id="closeModal" type="button" onclick="$('#editModal').modal('hide');" class="btn btn-danger addForm">关闭</button>
                                </td>
                            </tr>
                        </table>
                    </form>
				</div>
			</div>
		</div>
	</div>

    <div class="modal fade" id="videoModal" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 600px; ">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">视频监控</h4>
                </div>
                <div class="modal-body">
                    <table id="videoTable" class="table-hover table table-bordered">
                        <tr>
                            <td>
                                <iframe height="310px" id="videoIframe" src="#" frameBorder="0" width="99.6%"></iframe>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <button type="button" onclick="$('#videoModal').modal('hide');" class="btn btn-danger addForm">关闭</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>